<template>
  <div class="diabetesPrediction">
    <nav class="navbar navbar-default">
      <div class="container-fluid"
           style="display: flex;flex-direction: row;justify-content: center;align-items: center">
        <h3>糖尿病预测大法</h3>
        <!-- Collect the nav links, forms, and other content for toggling -->
      </div><!-- /.container-fluid -->
    </nav>
    <div class="jumbotron" id="middle">
      <form>
        <div class="form-group">
          <label class="label-left">怀孕指数：</label>
          <input type="text" class="form-control" name="pregnancies" v-model="form.pregnancy_num" placeholder="怀孕指数">
        </div>
        <div class="form-group">
          <label class="label-left">血糖：</label>
          <input type="text" class="form-control" name="glucose" v-model="form.pgc" placeholder="血糖">
        </div>
        <div class="form-group">
          <label class="label-left">血压：</label>
          <input type="text" class="form-control" name="bloodpressure" v-model="form.d_press" placeholder="血压">
        </div>
        <div class="form-group">
          <label class="label-left">皮脂：</label>
          <input type="text" class="form-control" name="skinthickness" v-model="form.tri_thick" placeholder="皮脂">
        </div>
        <div class="form-group">
          <label class="label-left">胰岛素：</label>
          <input type="text" class="form-control" name="insulin" v-model="form.two_ins" placeholder="胰岛素">
        </div>
        <div class="form-group">
          <label class="label-left">BMI：</label>
          <input type="text" class="form-control" name="bmi" v-model="form.weight" placeholder="BMI">
        </div>
        <div class="form-group">
          <label class="label-left">糖尿病家庭指数：</label>
          <input type="text" class="form-control" name="diabetespedigreefunction" v-model="form.func_dia"
                 placeholder="糖尿病家庭指数">
        </div>
        <div class="form-group">
          <label class="label-left">年龄：</label>
          <input type="text" class="form-control" name="age" v-model="form.age" placeholder="年龄">
        </div>
        <br>
        <el-button @click="forecast">预测一波</el-button>
      </form>
    </div>
  </div>
</template>

<script>
export default {
  name: "DiabetesPrediction",
  data() {
    return {
      form: {
        pregnancy_num: "",
        pgc: "",
        d_press: "",
        tri_thick: "",
        two_ins: "",
        weight: "",
        func_dia: "",
        age: ""
      }
    }
  },
  methods: {
    forecast() {
      if (this.form.pregnancy_num == "") {
        this.$message.warning("请输入怀孕指数")
        return
      }
      if (this.form.pgc == "") {
        this.$message.warning("请输入血糖")
        return
      }
      if (this.form.d_press == "") {
        this.$message.warning("请输入血压")
        return
      }
      if (this.form.tri_thick == "") {
        this.$message.warning("请输入皮脂")
        return
      }
      if (this.form.two_ins == "") {
        this.$message.warning("请输入胰岛素")
        return
      }
      if (this.form.weight == "") {
        this.$message.warning("请输入BMI")
        return
      }
      if (this.form.func_dia == "") {
        this.$message.warning("请输入糖尿病指数")
        return
      }
      if (this.form.age == "") {
        this.$message.warning("请输入年龄")
        return
      }
      this.$http.post("http://127.0.0.1:8888/rest/query", this.form).then(res => {
        console.log(res)
        if (res.res) {
          this.$message({
            message: '恭喜你，您的身体很健康',
            type: 'success'
          });
        } else {
          this.$message({
            message: '警告哦，您患病几率较大，请遵从医嘱，降低患病风险',
            type: 'warning'
          });
        }
      })
    }
  }
}
</script>


<style scoped lang="less">
@import "https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css";

.diabetesPrediction {
  width: 980px;
  float: right;
}


#middle {
  text-align: center;
  margin: 0 auto;
  width: 500px;
}

.form-group {
  margin: 0 auto;
  text-align: center;
  width: 300px;
}

.label-left {
  text-align: left;
  width: 280px;
}


a,
a:focus,
a:hover {
  color: #fff;
}

/* Custom default button */
.btn-default,
.btn-default:hover,
.btn-default:focus {
  color: #333;
  text-shadow: none; /* Prevent inheritance from `body` */
  background-color: #fff;
  border: 1px solid #fff;
}

/* Extra markup and styles for table-esque vertical and horizontal centering */
.site-wrapper {
  display: table;
  width: 100%;
  height: 100%; /* For at least Firefox */
  min-height: 100%;
  -webkit-box-shadow: inset 0 0 100px rgba(0, 0, 0, .5);
  box-shadow: inset 0 0 100px rgba(0, 0, 0, .5);
}

.site-wrapper-inner {
  display: table-cell;
  vertical-align: top;
}

.cover-container {
  margin-right: auto;
  margin-left: auto;
}

/* Padding for spacing */
.inner {
  padding: 30px;
}


/*
 * Header
 */
.masthead-brand {
  margin-top: 10px;
  margin-bottom: 10px;
}

.masthead-nav > li {
  display: inline-block;
}

.masthead-nav > li + li {
  margin-left: 20px;
}

.masthead-nav > li > a {
  padding-right: 0;
  padding-left: 0;
  font-size: 16px;
  font-weight: bold;
  color: #fff; /* IE8 proofing */
  color: rgba(255, 255, 255, .75);
  border-bottom: 2px solid transparent;
}

.masthead-nav > li > a:hover,
.masthead-nav > li > a:focus {
  background-color: transparent;
  border-bottom-color: #a9a9a9;
  border-bottom-color: rgba(255, 255, 255, .25);
}

.masthead-nav > .active > a,
.masthead-nav > .active > a:hover,
.masthead-nav > .active > a:focus {
  color: #fff;
  border-bottom-color: #fff;
}

@media (min-width: 768px) {
  .masthead-brand {
    float: left;
  }

  .masthead-nav {
    float: right;
  }
}


/*
 * Cover
 */

.cover {
  padding: 0 20px;
}

.cover .btn-lg {
  padding: 10px 20px;
  font-weight: bold;
}


/*
 * Footer
 */

.mastfoot {
  color: #999; /* IE8 proofing */
  color: rgba(255, 255, 255, .5);
}


@media (min-width: 768px) {

  .masthead {
    position: fixed;
    top: 0;
  }

  .mastfoot {
    position: fixed;
    bottom: 0;
  }

  /* Start the vertical centering */
  .site-wrapper-inner {
    vertical-align: middle;
  }

  .cover-container {
    width: 100%; /* Must be percentage or pixels for horizontal alignment */
  }
}

@media (min-width: 992px) {
  .masthead,
  .mastfoot,
  .cover-container {
    width: 700px;
  }
}


</style>